<template>
	<view class="container-outer">

		<view class="choose" v-if="choose">
			<view class="title">
				设置头像和昵称
			</view>
			<view class="step2">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="chooseimg">
					<image class="avatar" mode="aspectFill" :src="headimgurl"></image>
				</button>
				<input type="nickname" @blur="choosenickname" class="weui-input" placeholder="请输入昵称" />
			</view>
			<button plain @click="done" class="done" type="primary">
				<uni-icons type="gear" size="20" style="margin:0 5px 0 0px;color:#fff"> </uni-icons>
				<text>设置</text>
			</button>
		</view>
		<view class="container" v-else>
			<image class="logo" src="../../static/logo.png" mode="aspectFit"></image>
			<button class="btn" @click="login" type="primary">
				<uni-icons type="weixin" size="20"></uni-icons>
				<text>微信一键登入</text>
			</button>
		</view>
	</view>
</template>

<script setup>
	import * as api from "@/api/users.js"
	import { ref } from "vue"
	import useUser from "@/store/users.js"
	import {onHide,onUnload} from "@dcloudio/uni-app"
	let userStore = useUser()
	//灰色头像
	let headimgurl = ref(
		'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
	)
	
	
	onUnload(()=>{
		console.log('微信登入组件卸载了')
		let userStore = useUser()
		//可以再次拉起登入框
		userStore.authView = false;
	})

	//昵称
	let nickname = ""
	let chooseimg = (e) => {
		// console.log(e)
		headimgurl.value = e.detail.avatarUrl;
	}

	let choosenickname = (e) => {
		// console.log(e)
		nickname = e.detail.value

	}

	let choose = ref(false)
	//点击完成了头像昵称选择
	let done = async () => {

		if (!nickname) {
			uni.showToast({
				icon: "error",
				title: "用户昵称未获取,再试一次"
			})
			return
		}
		uni.showLoading({
			title: "正在登入"
		})
		
		//显示选择头像和昵称界面,并且将头像昵称赋值给userInfo;再修改服务器用户信息,因为userInfo做了持久存储,所以不用担心丢失的问题
		let result = await api.updateUser({ nickname, headimgurl: headimgurl.value,unid:userStore.userInfo.unid })
		// console.log(result)
		userStore.userInfo.nickname = nickname;
		userStore.userInfo.headimgurl = headimgurl.value;
		//跳转到主页
		uni.switchTab({
			url: "/pages/tabbar/home/home",
			success(){
				uni.hideLoading()
			}
		})
	}


	let login = () => {
		//先试用uni.login获取code
		// console.log(213)
		uni.showLoading({
			title: "正在登入"
		})
		uni.login({
			async success(res) {
				console.log(res)
				let code = res.code;
				//选择用户头像和昵称
				let result = await api.mpLoginApi({
					appid: 'wxfbff9d744fc77dd0',
					secret: 'd4c93bc38d0d4e19b1db39abfb6186b5',
					js_code: code,
					grant_type: 'authorization_code'
				})
				console.log(result)
				//判断是否有头像和昵称,如果有直接返回信息,如果没有那么更新用户头像和信息
				let userInfo = result.userInfo;
				userStore.userInfo = userInfo;
				uni.setStorageSync('myx-token', result.token)
				if (userInfo.headimgurl && userInfo.nickname) {
					//直接将数据存到store,并且跳转到home
					uni.switchTab({
						url: "/pages/tabbar/home/home"
					})
				} else {
					//显示选择头像和昵称界面,并且将头像昵称赋值给userInfo;再修改服务器用户信息,因为userInfo做了持久存储,所以不用担心丢失的问题
					choose.value = true;
					//逻辑编写在done方法中
					uni.hideLoading()
				}
			}
		})
	}
</script>

<style scoped lang="scss">
	.title {
		margin-top: 30px;
		font-size: 20px;
		text-align: center;
	}

	.container-outer {
		padding-top: 50px;
	}



	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		text-align: center;

		:deep(.uni-icons) {
			color: #fff !important;
			font-size: 30px !important;

		}

		.logo {
			width: 200rpx;
			height: 200px;
		}

		.btn {
			padding: 0 70rpx;
			box-sizing: border-box;
			height: 50px;
			width: 400rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

		}


	}

	.step2 {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-top: 100px;

		image,
		button {
			padding: 0;
			margin: 0;
			outline: none;
			background-color: #fff;
			width: 170rpx;
			height: 100px;

		}



		input {
			margin-top: 20px;
			text-align: center;
		}
	}

	.done {
		width: 300rpx;
		margin-top: 20px;
		display: flex;
		padding: 0 85rpx;
		justify-content: space-around;
		height: 50px;
		align-items: center;

		:deep(.uni-icons) {
			color: #1aad19 !important;
			font-size: 30px !important;

		}
	}
</style>